<template>
    <div class="iphone" >
        <div class="iphone-body" style="background: #F2F6FC">
            <div>
                <el-carousel height="140px" :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in form.imgUrl" :key="item">
                        <el-image :src="item"   style="width: 100%; height: 200px" fit="cover">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div style="background: white;margin-top: 12px">
                <van-notice-bar left-icon="volume-o" :text="form.natice"/>
            </div>
            <div style="background: white;margin-top: 12px">
                <van-grid :border="false" :gutter="10" :column-num="4" >
                    <van-grid-item v-for="(item,index) in form.columnsList" :key="index">
                        <div style="width: 59px;height: 59px">
                            <van-image round fit="fill":src="item.imgUrl" style="width: 59px;height: 59px" />
                        </div>
                        <div style="font-size: 10px;margin-top: 4px">
                           {{item.title}}
                        </div>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "iphone",
        data() {
            return {
                appData:[]
            }
        },
        props:['form'],
        watch:{
            form(val,oval){
                this.form=val
            }
        }
    }
</script>

<style scoped>
    .iphone {
        position: relative;
        border-radius: 36px;
        width: 363px;
        height: 700px;
        background-image: url("../../assets/img/iphone.jpg");
        background-size: 100% 100%;
        padding-left:11px ;
        padding-right: 13px;
        padding-top: 37px;
    }

    .iphone-body {
        width: 100%;
        height: 690px;
        border-bottom-left-radius: 36px;
        border-bottom-right-radius: 36px;
    }
    .van-image--round img{
        border-radius: 8px!important;
    }
    .van-image--round{
        border-radius: 8px!important;
    }
</style>